import '../assets/css/ask.less'
import React, { useState } from 'react'
import { NavBar, Toast, InputItem, TextareaItem, Icon } from 'antd-mobile'
import { withRouter, RouteComponentProps } from 'react-router-dom'
// import { LeftOutline} from "antd-mobile-icons";
import { submitQuestion } from '../service/api'
import umbrella from '../assets/image/11.png'
import time from '../assets/image/2.png'
import edu from '../assets/image/3.png'
const Qa: React.FC<RouteComponentProps> = (props) => {
    const [input, setInput] = useState<any>('')
    const [inputArea, setInputArea] = useState<any>('')

    const handleSubmit = async () => {
        if (!input) {
            Toast.fail('请输入问题')
            return false
        }
        const params = {
            content: '',
            description: inputArea,
            question: input,
        }
        const { status, result } = await submitQuestion(params)
        if (status === 0) {
            Toast.success('提交成功')
            props.history.push(`/qa-detail/${result.id}`)
        }
    }
    return (
        <div className="ask-page">
            <NavBar
                mode="light"
                leftContent={<Icon type="left" size="md" />}
                onLeftClick={() => props.history.goBack()}
                rightContent={<span onClick={handleSubmit}>发布问题</span>}
            >
                <span className="ask-page-header">快速提问</span>
            </NavBar>
            <div className="ask-content">
                <div className="ask-content-20">
                    <img src={edu} alt="" width="20" style={{ marginRight: '2px' }} /> 全行业专家
                </div>
                <div>
                    {' '}
                    <img src={time} alt="" width="20" style={{ marginRight: '2px' }} />{' '}
                    三小时内专业回复
                </div>
                <div className="ask-content-20">
                    {' '}
                    <img src={umbrella} alt="" width="20" style={{ marginRight: '2px' }} /> 隐私保护
                </div>
            </div>
            <div className="ask-input">
                <InputItem
                    placeholder="请描述你的问题"
                    value={input}
                    onChange={(e) => setInput(e)}
                />
            </div>
            <div className="ask-input ask-input-area">
                <TextareaItem
                    value={inputArea}
                    onChange={(e) => setInputArea(e)}
                    placeholder="对问题补充说明，可以更快获得解答（选填）"
                    rows={10}
                />
            </div>
        </div>
    )
}
export default withRouter(Qa)
